{#
This file is part of EC-CUBE

Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.

http://www.ec-cube.co.jp/

For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends '@admin/default_frame.twig' %}

{% set menus = ['setting', 'shop', 'shop_delivery'] %}

{% block title %}{{ 'admin.setting.shop.delivery_setting'|trans }}{% endblock %}
{% block sub_title %}{{ 'admin.setting.shop'|trans }}{% endblock %}

{% form_theme form '@admin/Form/bootstrap_4_horizontal_layout.html.twig' %}


{% block javascript %}
    <script src="{{ asset('assets/js/vendor/jquery.ui/jquery.ui.core.min.js', 'admin') }}"></script>
    <script src="{{ asset('assets/js/vendor/jquery.ui/jquery.ui.widget.min.js', 'admin') }}"></script>
    <script src="{{ asset('assets/js/vendor/jquery.ui/jquery.ui.mouse.min.js', 'admin') }}"></script>
    <script src="{{ asset('assets/js/vendor/jquery.ui/jquery.ui.sortable.min.js', 'admin') }}"></script>
    <script>
        $(function() {
            $('#set_fee_all').on('click', function() {
                var fee = $('#{{ form.free_all.vars.id }}').val();
                if ($.isNumeric(fee)) {
                    $('input[name$="[fee]"]').val(fee);
                    return;
                }
                alert("{{ 'admin.setting.shop.delivery.fee.invalid'|trans }}");
            });
        });
    </script>
    <script>
        // 降順にソートする
        $(function() {
            var $items_wrapper = $('.sortable-container');
            var $items = $('.sortable-item');
            $items.sort(function(a, b) {
                return parseInt($(a).find('.sort-no').val()) > parseInt($(b).find('.sort-no').val());
            });
            $items.each(function() {
                $items_wrapper.append($(this).remove());
            })
        });

        // 並び替え後にsort noを更新
        function updateSortNo() {
            var $items = $('.sortable-container').find('.sortable-item');
            $items.each(function() {
                $(this).find('.sort-no').val($items.index(this) + 1);
            });
        }

        // 最初と最後の↑↓を再描画
        function redrawDisableAllows() {
            var items = $('.sortable-item');
            items.find('a').removeClass('disabled');
            items.first().find('a.action-up').addClass('disabled');
            items.last().find('a.action-down').addClass('disabled');
        }

        // 表示順の更新を行う
        function moveSortNo() {
            updateSortNo();
            redrawDisableAllows();
        }

        $(function() {

            var $collectionHolder = $('#delivery-time-group');
            var index = $collectionHolder.find('.delivery-time-item').length;

            redrawDisableAllows();

            // お届け時間設定の新規作成ボタンでお届け時間項目を追加する
            $('#add-delivery-time-button').on('click', function(event) {

                // 追加するお届け時間名を取得
                var deliveryTimeName = $('#add-delivery-time-value').val();

                if (deliveryTimeName == '') {
                    return;
                }

                var prototype = $collectionHolder.data('prototype');

                var newForm = prototype.replace(/__name__/g, index);
                var newForm = newForm.replace(/__value__/g, deliveryTimeName);

                // 要素を追加
                var $lastRow = $('#delivery-time-group > li:last');
                $lastRow.after(newForm);

                // お届け時間名を入れる
                var inputId = '#delivery_delivery_times_' + index + '_delivery_time';
                $(inputId).val(deliveryTimeName);
                $(inputId).attr('data-origin-value', deliveryTimeName);

                // 入力欄を初期化
                $('#add-delivery-time-value').val('');

                // 要素数をインクリメント
                index++;

                moveSortNo();
            });

            // 明細行の削除
            $('#delivery-time-group').on('click', '.remove-delivery-time-item', function(event) {
                event.preventDefault();

                $(this).tooltip('hide');

                // 自身の行を削除.
                $(event.target).parents('li').remove();

                moveSortNo();
            });

            // Drag and Drop
            $('.sortable-container').sortable({
                items: '> .sortable-item',
                cursor: 'move',
                update: function(e, ui) {
                    moveSortNo();
                }
            });
            // Up
            $('#delivery-time-group').on('click', 'a.action-up', function(e) {
                e.preventDefault();
                var current = $(this).parents('li');
                if (current.prev().hasClass('sortable-item')) {
                    current.prev().before(current);
                    moveSortNo();
                }
            });
            // Down
            $('#delivery-time-group').on('click', 'a.action-down', function(e) {
                e.preventDefault();
                var current = $(this).parents('li');
                if (current.next().hasClass('sortable-item')) {
                    current.next().after(current);
                    moveSortNo();
                }
            });

            // 編集
            $('#delivery-time-group').on('click', 'a.action-edit', function(e) {
                e.preventDefault();
                var current = $(this).parents('li');
                current.find('.mode-view').addClass('d-none');
                current.find('.mode-edit').removeClass('d-none');
                current.find('.action-edit-submit').attr('disabled', false);
                current.find('.action-edit-cancel').attr('disabled', false);
            });

            // 編集決定
            $('#delivery-time-group').on('click', 'button.action-edit-submit', function(e) {
                e.preventDefault();
                var current = $(this).parents('li');
                var value = current.find('.form-control').val();
                current.find('.display-label').text(value);
                current.find('.mode-view').removeClass('d-none');
                current.find('.mode-edit').addClass('d-none');
                current.find('[data-origin-value]').each(function(e) {
                    $(this).attr('data-origin-value', value);
                });
            });
            // 編集キャンセル
            $('#delivery-time-group').on('click', 'button.action-edit-cancel', function(e) {
                e.preventDefault();
                var current = $(this).parents('li');
                current.find('[data-origin-value]').each(function(e) {
                    $(this).val($(this).attr('data-origin-value'));
                });
                var value = current.find('.form-control').val();
                current.find('.display-label').text(value);
                current.find('.mode-view').removeClass('d-none');
                current.find('.mode-edit').addClass('d-none');
            });
            // 編集時, エラーがあれば入力欄を表示.
            $('#delivery-time-group').find('.is-invalid').each(function(e) {
                var current = $(this).parents('li');
                current.find('.mode-view').addClass('d-none');
                current.find('.mode-edit').removeClass('d-none');
            });
            // 表示・非表示の切り替え
            $('#delivery-time-group').on('click', 'a.action-visible', function(e) {
                e.preventDefault();

                var $this = $(this);
                var $i = $this.find('i');

                if ($i.hasClass('fa-toggle-on')) {
                    $i.addClass('fa-toggle-off');
                    $i.removeClass('fa-toggle-on');
                    $this.attr('data-original-title', '{{ 'admin.common.to_show'|trans }}');
                    $this.parents('li').find('.visible').val('0');
                } else {
                    $i.addClass('fa-toggle-on');
                    $i.removeClass('fa-toggle-off');
                    $this.attr('data-original-title', '{{ 'admin.common.to_hide'|trans }}');
                    $this.parents('li').find('.visible').val('1');
                }
                // ツールチップの表示を更新
                $this.tooltip('show');


            });

            // FIXME 明細行のツールチップが表示されないため, ここでツールチップを有効にしている.
            $('[data-tooltip="true"]').tooltip();
        });
    </script>
{% endblock javascript %}

{% block main %}
    <form method="post" action="{{ delivery_id ? url('admin_setting_shop_delivery_edit', {'id': delivery_id}) : url('admin_setting_shop_delivery_new') }}">
        {{ form_widget(form._token) }}
        <div class="c-contentsArea__cols">
            <div class="c-contentsArea__primaryCol">
                <div class="c-primaryCol">
                    <div class="card rounded border-0 mb-4">
                        <div class="card-header"><span>{{ 'admin.setting.shop.delivery.base_info'|trans }}</span></div>
                        <div id="ex-delivery-basic" class="card-body">
                            <div class="row">
                                <div class="col-3"><span>{{ 'admin.setting.shop.delivery.delivery_name'|trans }}</span></div>
                                <div class="col mb-2">
                                    {{ form_widget(form.name) }}
                                    {{ form_errors(form.name) }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-3"><span>{{ 'admin.setting.shop.delivery.delivery_sevice_name'|trans }}</span></div>
                                <div class="col mb-2">
                                    {{ form_widget(form.service_name) }}
                                    {{ form_errors(form.service_name) }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-3">
                                    <div class="d-inline-block" data-tooltip="true" data-placement="top"
                                         title="{{ 'tooltip.setting.shop.delivery.tracking_number_url'|trans }}">
                                        <span>{{ 'admin.setting.shop.delivery.tracking_number_url'|trans }}</span><i class="fa fa-question-circle fa-lg ml-1"></i>
                                    </div>
                                </div>
                                <div class="col mb-2">
                                    {{ form_widget(form.confirm_url) }}
                                    {{ form_errors(form.confirm_url) }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-3">
                                    <div class="d-inline-block" data-tooltip="true" data-placement="top"
                                         title="{{ 'tooltip.setting.shop.delivery.sale_type'|trans }}">
                                        <span>{{ 'admin.setting.shop.delivery.sale_type'|trans }}</span>
                                        <i class="fa fa-question-circle fa-lg ml-1"></i>
                                    </div>
                                </div>
                                <div class="col mb-2">
                                    {{ form_widget(form.sale_type) }}
                                    {{ form_errors(form.sale_type) }}
                                </div>
                            </div>
                            {# エンティティ拡張の自動出力 #}
                            {% for f in form if f.vars.eccube_form_options.auto_render %}
                                {% if f.vars.eccube_form_options.form_theme %}
                                    {% form_theme f f.vars.eccube_form_options.form_theme %}
                                    {{ form_row(f) }}
                                {% else %}
                                    <div class="row">
                                        <div class="col-3"><span>{{ f.vars.label|trans }}</span></div>
                                        <div class="col mb-2">
                                            {{ form_widget(f) }}
                                            {{ form_errors(f) }}
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                    <div class="card rounded border-0 mb-4">
                        <div class="card-header"><span>{{ 'admin.setting.shop.delivery.payment_method'|trans }}</span></div>
                        <div id="ex-delivery-payment" class="card-body">
                            <div>
                                {{ form_widget(form.payments, {'label_attr': {'class': 'checkbox-inline'}}) }}
                                {{ form_errors(form.payments) }}
                            </div>
                        </div>
                    </div>
                    <div class="card rounded border-0 mb-2">
                        <div class="card-header"><span>{{ 'admin.setting.shop.delivery.delivery_time_setting'|trans }}</span></div>
                        <div id="ex-delivery-time" class="card-body p-0">
                            <div class="card rounded border-0 mb-2">
                                <ul id="delivery-time-group" class="list-group list-group-flush sortable-container"
                                    data-prototype="{% filter escape %}{{ include('@admin/Setting/Shop/delivery_time_prototype.twig', {'form': form.delivery_times.vars.prototype}) }}{% endfilter %}">
                                    <li class="list-group-item">
                                        <div class="form-row">
                                            <div class="col-auto d-flex align-items-center">
                                                <input id="add-delivery-time-value" class="form-control" type="text">
                                            </div>
                                            <div class="col-auto d-flex align-items-center">
                                                <button id="add-delivery-time-button" class="btn btn-ec-regular" type="button">{{ 'admin.common.create__new'|trans }}</button>
                                            </div>
                                        </div>
                                    </li>
                                    {% for child in form.delivery_times %}
                                        {{ include('@admin/Setting/Shop/delivery_time_prototype.twig', {'form': child}) }}
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                    </div>
                    <p class="mb-4">{{ 'admin.common.drag_and_drop_description'|trans }}</p>
                    <div class="card rounded border-0 mb-4">
                        <div class="card-header"><span>{{ 'admin.setting.shop.delivery.delivery_fee_by_pref'|trans }}</span></div>
                        <div id="ex-delivery-fee" class="card-body p-0">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <div class="row justify-content-start">
                                        <div class="col-2">
                                            <div class="d-inline-block align-middle" data-tooltip="true"
                                                 data-placement="top" title="{{ 'tooltip.setting.shop.delivery.apply_to_pref'|trans }}"><span
                                                        class="card-title">{{ 'admin.setting.shop.delivery.apply_to_pref__title'|trans }}</span><i
                                                        class="fa fa-question-circle fa-lg ml-1"></i></div>
                                        </div>
                                        <div class="col-3">
                                            {{ form_widget(form.free_all) }}
                                            {{ form_errors(form.free_all) }}
                                        </div>
                                        <div class="col-auto">
                                            <button id="set_fee_all" class="btn btn-ec-regular" type="button">{{ 'admin.setting.shop.delivery.apply_to_pref__button'|trans }}</button>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    {% for child in form.delivery_fees %}
                                        {% if loop.index % 2 != 0 %}<div class="row mb-2">{% endif %}
                                        <div class="col{{ loop.last ? '-6' }}">
                                            <div class="row">
                                                <div class="col-2">
                                                    <label>{{ child.vars.data.pref }}</label>
                                                </div>
                                                <div class="col pl-0">
                                                    {{ form_widget(child.fee) }}
                                                    {{ form_errors(child.fee) }}
                                                </div>
                                            </div>
                                        </div>
                                        {% if loop.index % 2 == 0 or loop.last %}</div>{% endif %}
                                    {% endfor %}
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="card rounded border-0 mb-4">
                        <div id="ex-delivery-shop" class="card-header">
                            <div class="row">
                                <div class="col-8">
                                    <div class="d-inline-block" data-tooltip="true" data-placement="top"
                                         title="{{ 'tooltip.setting.shop.delivery.shop_memo'|trans }}">
                                    <span class="card-title">{{ 'admin.common.shop_memo'|trans }}<i
                                                class="fa fa-question-circle fa-lg ml-1"></i></span></div>
                                </div>
                                <div class="col-4 text-right"><a data-toggle="collapse" href="#freeArea"
                                                                 aria-expanded="false" aria-controls="freeArea"><i
                                                class="fa fa-angle-up fa-lg"></i></a></div>
                            </div>
                        </div>
                        <div class="collapse show ec-cardCollapse" id="freeArea">
                            <div class="card-body">
                                <div>
                                    {{ form_widget(form.description, {'attr': {'rows': 8}}) }}
                                    {{ form_errors(form.description) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="c-conversionArea">
            <div class="c-conversionArea__container">
                <div class="row justify-content-between align-items-center">
                    <div class="col-6">
                        <div class="c-conversionArea__leftBlockItem">
                            <a class="c-baseLink" href="{{ url('admin_setting_shop_delivery') }}">
                                <i class="fa fa-backward" aria-hidden="true"></i><span>{{ 'admin.setting.shop.delivery_list'|trans }}</span>
                            </a>
                        </div>
                    </div>
                    <div class="col-6">
                        <div id="ex-conversion-action" class="row align-items-center justify-content-end">
                            <div class="col-auto">
                                {{ form_widget(form.visible) }}
                                {{ form_errors(form.visible) }}
                            </div>
                            <div class="col-auto">
                                <button class="btn btn-ec-conversion px-5" type="submit">{{ 'admin.common.registration'|trans }}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endblock %}
